<template>
  <!-- 
  <img src="../assets/img/zhuanti.jpg" alt />-->
  <div class="index">
    <div  v-if="is">
        <shounav :routernav="routernav"/>
    </div>
    <div v-if="is" class="nav">
      <ul class="clear">
        <li>一级分类 :</li>
        <li class="active">全部</li>
        <li>苹果</li>
        <li>阿克苏</li>
        <li>酒店</li>
        <li>休闲</li>
        <li>电影</li>
      </ul>
    </div>
    <div v-if="is" class="shangjiamian">
      <div class="clear">
        <div class="shangjiamiannavleft">
          <div>排序 :</div>
          <div>销量</div>
          <div class="active">价格</div>
          <div>评分最高</div>
        </div>
        <div class="shangjiamiannavright">
          <div>筛选 :</div>
          <div class="active">全国</div>
          <div>次日达</div>
        </div>
      </div>
      <div class="shangjiabottom">
        <indexmaincoll
          v-for="itme in shangjiabottom"
          :key="itme.id"
          v-show="itme.id<=8*danqian&&itme.id>8*(danqian-1)"
          class="shangjiabottomcoll"
          :zi="itme.zi"
          :guige="itme.guige"
          :jiage="itme.jiage"
          :url="itme.url"
          :yuanjia="itme.yuanjia"
        />
        <div class="fenyeqi">
          <fenyeqi @danqainye="danqainye($event)" :zong="Math.ceil(shangjiabottom.length/8)" />
        </div>
      </div>
    </div>
    <div class="kong" v-else>
      <div>
        <i class="iconfont icon-sousuo"></i>
      </div>
      <div>抱歉，暂无查到您要的商品</div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import indexmaincoll from "@/components/indexmaincoll.vue";
import fenyeqi from "@/components/fenyeqi.vue";
import shounav from "@/components/nav.vue";
import Swiper from "swiper";
import "@/assets/font/iconfont.css";
export default {
  data() {
    return {
      is:true,
      danqian: 1,
      routernav: [
        { zi: "首页", to:"/index/indexshouye" },
        { zi: localStorage.fenlieye, to: "" },
        { zi: localStorage.fenliedie, to: "" },
        { zi: localStorage.fenlie, to: "" }
      ],
      shangjiabottom: [
        {
          id: 1,
          zi: "新西兰佳沛黄金奇异果",
          guige: "果肉绵密，花蜜般的甘甜百吃不厌",
          jiage: "28.80",
          url: require("../assets/img/banner-16.png"),
          yuanjia: "'40.00'"
        },
        {
          id: 2,
          zi: "新西兰佳沛黄金奇异果",
          guige: "果肉绵密，花蜜般的甘甜百吃不厌",
          jiage: "28.80",
          url: require("../assets/img/banner-15.png"),
          yuanjia: "'40.00'"
        },
        {
          id: 3,
          zi: "新西兰佳沛黄金奇异果",
          guige: "果肉绵密，花蜜般的甘甜百吃不厌",
          jiage: "28.80",
          url: require("../assets/img/banner-14.png"),
          yuanjia: "'40.00'"
        },
        {
          id: 4,
          zi: "新西兰佳沛黄金奇异果",
          guige: "果肉绵密，花蜜般的甘甜百吃不厌",
          jiage: "28.80",
          url: require("../assets/img/banner-13.png"),
          yuanjia: "'40.00'"
        },
        {
          id: 5,
          zi: "新西兰佳沛黄金奇异果",
          guige: "果肉绵密，花蜜般的甘甜百吃不厌",
          jiage: "28.80",
          url: require("../assets/img/banner-13.png"),
          yuanjia: "'40.00'"
        },
        {
          id: 6,
          zi: "新西兰佳沛黄金奇异果",
          guige: "果肉绵密，花蜜般的甘甜百吃不厌",
          jiage: "28.80",
          url: require("../assets/img/banner-13.png"),
          yuanjia: "'40.00'"
        },
        {
          id: 7,
          zi: "新西兰佳沛黄金奇异果",
          guige: "果肉绵密，花蜜般的甘甜百吃不厌",
          jiage: "28.80",
          url: require("../assets/img/banner-16.png"),
          yuanjia: "'40.00'"
        },
        {
          id: 8,
          zi: "新西兰佳沛黄金奇异果",
          guige: "果肉绵密，花蜜般的甘甜百吃不厌",
          jiage: "28.80",
          url: require("../assets/img/banner-16.png"),
          yuanjia: "'40.00'"
        },
        {
          id: 9,
          zi: "新西兰佳沛黄金奇异果",
          guige: "果肉绵密，花蜜般的甘甜百吃不厌",
          jiage: "28.80",
          url: require("../assets/img/banner-15.png"),
          yuanjia: "'40.00'"
        },
        {
          id: 10,
          zi: "新西兰佳沛黄金奇异果",
          guige: "果肉绵密，花蜜般的甘甜百吃不厌",
          jiage: "28.80",
          url: require("../assets/img/banner-16.png"),
          yuanjia: "'40.00'"
        }
      ]
    };
  },
  name: "index",
  components: {
    indexmaincoll,
    fenyeqi,
    shounav
  },
  methods: {
    danqainye(e) {
      this.danqian = e;
    },
    fenlie() {
      if (localStorage.fenlie == "未知") {
        this.is = false;
        window.console.log(localStorage.fenlie);
      } else {
        this.is = true;
      }
      (this.routernav = [
        { zi: "首页", to: "/index" },
        { zi: localStorage.fenlieye, to: "" },
        { zi: localStorage.fenliedie, to: "" },
        { zi: localStorage.fenlie, to: "" }
      ]),
        alert(localStorage.fenlie + "请求数据");
    }
  },
  mounted() {
      if (localStorage.fenlie == "未知") {
        this.is = false;
        window.console.log(localStorage.fenlie);
      } else {
        this.is = true;
      }
      (this.routernav = [
        { zi: "首页", to: "/index" },
        { zi: localStorage.fenlieye, to: "" },
        { zi: localStorage.fenliedie, to: "" },
        { zi: localStorage.fenlie, to: "" }
      ]),
        alert(localStorage.fenlie+ "请求数据");
    new Swiper(".thumbs", {
      noSwiping: true,
      noSwipingClass: "swiper-slide"
    });
    new Swiper(".swiper-container", {
      spaceBetween: 10,
      loop: true,
      thumbs: {
        swiper: {
          el: ".thumbs",
          spaceBetween: 10,
          slidesPerView: 4,
          watchSlidesVisibility: true /*避免出现bug*/
        }
      },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
      }
    });
  }
};
</script>
<style scoped>
.guding {
  width: 100%;
  position: fixed;
  top: 0px;
  background-color: #fff;
  z-index: 11;
}
.shangjiamian {
  width: 80%;
  margin: 0px auto;
}
.nav ul {
  width: 80%;
  border-bottom: 1px solid #ccc;
  list-style: none;
  margin: 0px auto;
  padding: 0px 0px 0.6rem 0px;
  font-size: 0.8rem;
}
.nav ul li {
  float: left;
  padding: 0.2rem 0.5rem;
  cursor: pointer;
}
.nav ul li:first-of-type {
  padding-left: 0px;
}
.nav ul li.active {
  background-color: #498e3d;
  color: aliceblue;
}
.shangjiamiannavleft {
  float: left;
}
.shangjiamiannavright {
  float: right;
}
.shangjiamiannavleft div,
.shangjiamiannavright div {
  padding: 0.2rem 0.5rem;
  float: left;
  border: 1px solid #ccc;
  margin: 0.5rem 1rem;
  font-size: 0.8rem;
  cursor: pointer;
}
.shangjiamiannavright div {
  border: none;
  background-color: #dedede;
}
.shangjiamiannavleft div:nth-child(1),
.shangjiamiannavright div:nth-child(1) {
  margin-left: 0px;
  padding-left: 0px;
  border: none;
  background-color: #fff;
}
.shangjiamiannavright div:last-of-type {
  margin-right: 0px;
}
.shangjiamiannavleft div.active {
  border: 1px solid #498e3d;
  color: #498e3d;
}
.shangjiamiannavright div.active {
  background-color: #498e3d;
  color: #fff;
}

.shangjiabottom {
  display: flex;
  flex-wrap: wrap;
}
.shangjiabottomcoll {
  margin-right: 1.33%;
  margin-bottom: 1rem;
  box-sizing: border-box;
}
.shangjiabottomcoll:nth-child(4n) {
  margin-right: 0px;
}
.fenyeqi {
  width: 100%;
  display: flex;
  justify-content: center;
}

.kong {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  color: #f08200;
  font-size: 2rem;
  padding: 6rem 0px;
}
.kong .iconfont {
  font-size: 4rem;
  line-height: 6rem;
}
</style>